// component/progress/ProblemProgress.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        already: {
            type: Number,
            value: 50
        },
        total: {
            type: Number,
            value: 100
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        percent: 0,
        backgroundColor: [0, 200, 200],
        formatBgColor: "",
        color: [0, 200 * 0.587, 200 * 0.114],
        formatColor: "",
        countTimer: [],
        originAlready: 0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        startCount: function () {
            this.data.countTimer.forEach(item => {
                clearTimeout(item)
            });
            this.data.countTimer = []
            this.data.startTime = Date.now()
            this.data.originAlready = this.data.already
            this._startCount()
        },
        _startCount: function () {
            let that = this
            let timer = setTimeout(function () {
                let already = (Date.now() - that.data.startTime) / 1000 + that.data.originAlready
                let percent = 100 - already / that.data.total * 100
                that.setData({
                    percent: percent,
                    already: already
                })
                that.setColor()
                if (already >= that.data.total) {
                    return
                }
                that._startCount()
                that.data.countTimer.shift()
            }, 200)
            that.data.countTimer.push(timer)
        },
        /**
         * 根据占比设置rgb
         * 颜色变化过程
         * 蓝 (0,0,200)  //已删除
         * 青 (0,200,200)
         * 绿 (0,200,0)
         * 黄 (200,200,0)
         * 红 (255,0,0)
         */
        setColor: function () {
            let percent = this.data.percent
            let bg_color = [0, 0, 0]
            if (percent > 66) {
                bg_color[1] = 200
                bg_color[2] = 200 - (100 - percent) / 33 * 200
            } else if (percent > 33) {
                bg_color[1] = 200
                bg_color[0] = (66 - percent) / 33 * 255
            } else {
                bg_color[0] = 255
                bg_color[1] = 200 - (33 - percent) / 33 * 200
            }

            let color = this._countColor(bg_color)
            this.setData({
                backgroundColor: bg_color,
                color: color,
                formatBgColor: this._formatColor(bg_color),
                formatColor: this._formatColor(color)
            })
        },

        /**
         * 灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114
         * @param {*} bgColor 
         */
        _countColor: function (bgColor) {
            let color = [bgColor[0] * 0.299, bgColor[1] * 0.587, bgColor[2] * 0.114]
            return color
        },

        _formatColor: function (color) {
            let value = color.join(',')
            let formatColor = 'rgb(' + value + ')'
            return formatColor
        }

    },

    lifetimes: {
        attached: function () {
            this.setData({
                percent: 100 - this.data.already / this.data.total * 100,
                formatBgColor: this._formatColor(this.data.backgroundColor),
                formatColor: this._formatColor(this.data.color)
            })
        }
    }
})